<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Template • TodoMVC</title>
  <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
  <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
  <!-- CSS overrides - remove if you don't need it -->
  <link rel="stylesheet" href="css/app.css">
</head>

<body>
  <section class="todoapp" id="app">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo"
        @keydown.enter="handleNewTodoKeyDown"
        placeholder="What needs to be done?" autofocus>
    </header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <template v-if="todos.length">
      <section class="main">
        <input
          id="toggle-all"
          @change="handleToggleAllChange"
          class="toggle-all"
          type="checkbox">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <!-- These are here just to show the structure of the list items -->
          <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
          <!--
            任务项有三种样式状态：
              未完成：无样式
              已完成：completed
              编辑：editing
           -->
          <!--
            当我双击的时候，我就把 currentEditing = 当前双击的这个任务项
            每个任务项 class 的 editing 都有一个判定：如果 currentEditing === 我自己 ，则该任务项就获得 editing 样式
           -->
          <li
            :class="{
              completed: item.completed,
              editing: currentEditing === item
            }"
            v-for="(item, index) in todos">
            <div class="view">
              <input class="toggle"
                v-model="item.completed"
                type="checkbox">
              <label
                @dblclick="handleGetEditingDblclick(item)"
                >{{ item.title }}</label>
              <!--
                当事件处理函数没有传参的时候，第一个参数就是默认的事件源对象：event
                当手动传递了参数的时候，就没办法获取默认的 event 事件源对象
                这个时候我们可以手动在调用方法的时候传递 $event 来接收 event 事件源对象
               -->
              <button class="destroy"
                @click="handleRemoveTodoClick(index, $event)"></button>
            </div>
            <!--
              由于我们还有一个取消编辑不保存的功能，所以我们这里就不使用双向数据绑定
             -->
            <input class="edit"
              :value="item.title"
              @keydown.enter="handleSaveEditKeydown(item, index, $event)"
              @blur="handleSaveEditKeydown(item, index, $event)"
              @keydown.esc="handleCancelEditEsc">
          </li>
        </ul>
      </section>
      <!-- This footer should hidden by default and shown when there are todos -->
      <footer class="footer">
        <!-- This should be `0 items left` by default -->
        <span class="todo-count"><strong>0</strong> item left</span>
        <!-- Remove this if you don't implement routing -->
        <ul class="filters">
          <li>
            <a class="selected" href="#/">All</a>
          </li>
          <li>
            <a href="#/active">Active</a>
          </li>
          <li>
            <a href="#/completed">Completed</a>
          </li>
        </ul>
        <!-- Hidden if no completed items are left ↓ -->
        <button
          class="clear-completed"
          v-if="todos.some(item => item.completed)"
          @click="handleClearAllDoneClick"
          >Clear completed</button>
      </footer>
    </template>
  </section>
  <footer class="info">
    <p>Double-click to edit a todo</p>
    <!-- Remove the below line ↓ -->
    <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
    <!-- Change this out with your name and url ↓ -->
    <p>Created by <a href="http://todomvc.com">you</a></p>
    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
  </footer>
  <!-- Scripts here. Don't remove ↓ -->
  <!-- <script src="node_modules/todomvc-common/base.js"></script> -->
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="js/app.js"></script>
</body>

</html>
